import { CustomTable, ProTableValue } from '@/components/ProTable/interface';
import { useAddColumnsForm } from './form/addColumnsForm';

export function useColumnsDataGrid(dataGrid: CustomTable) {
  // 列的配置项
  let columnsDataGrid = reactive<CustomTable>({
    data: [],
    columns: [
      { prop: 'operation', label: 'operation', width: 200, fixed: 'left' },

      {
        prop: 'prop',
        label: '绑定字段'
      },
      {
        prop: 'label',
        label: '显示标签'
      },
      {
        prop: 'order',
        label: '排序'
      }
    ],
    headButtonList: [
      {
        label: 'add',
        type: 'primary',
        icon: 'el-Plus',
        methods: () => {
          openColumnsForm('新增表格列');
        }
      }
    ],
    rowButtonList: [
      {
        label: 'edit',
        type: 'primary',
        methods: row => {
          console.log(row, ';');
          openColumnsForm('编辑表格列', row);
        },
        attrs: {
          link: true
        }
      },

      {
        label: '删除',
        type: 'danger',
        methods: (row, index) => {
          console.log(123);

          useHandleData(
            () => {
              dataGrid.columns.splice(index, 1);
              columnsDataGrid.data.splice(index, 1);
            },
            null,
            `删除 【${row.label}】`
          );
        },
        attrs: {
          link: true
        }
      }
    ]
  });

  const { addColumnsForm, saveAddColumnsForm, openColumnsForm } = useAddColumnsForm(columnsDataGrid, dataGrid);

  return { columnsDataGrid, addColumnsForm, saveAddColumnsForm };
}
